<template>
  <div class="class-main">
    <!-- 头部搜索框 -->
    <el-card class="card">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="search.className" size="small" placeholder="班级名称模糊查询"></el-input>
        </el-col>
        <el-col :span="6" :offset="12">
          <el-button type="primary" size="small" @click="doSearch">搜索</el-button>
          <el-button type="default" size="small" @click="doReset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 内容区 -->
    <div class="content">
      <el-card class="card">
        <div slot="header">
          <el-button type="primary" @click="goAdd">新增</el-button>
        </div>
        <Pagination :page="page" align="right"></Pagination>
        <el-table :data="dormList" border stripe>
          <el-table-column fixed type="index" label="#"></el-table-column>
          <el-table-column prop="name" label="宿舍名称"></el-table-column>
          <el-table-column label="类型" :width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.type=='0'" style="color:blue;text-align:center;">男</p>
              <p v-else-if="scope.row.type=='1'" style="color:orange;text-align:center;">女</p>
              <p v-else style="color:red;text-align:center;">未知</p>
            </template>
          </el-table-column>
          <el-table-column prop="position" label="宿舍地址"></el-table-column>
          <el-table-column prop="bak" label="宿舍描述"></el-table-column>
          <el-table-column prop="startTime" label="开始时间"></el-table-column>
          <el-table-column prop="endTime" label="结束时间"></el-table-column>
          <el-table-column prop="addTime" label="添加时间"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="goEdit(scope.row.id)">编辑</el-button>
              <el-button type="danger" size="mini" @click="goDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <Detail ref="detail"></Detail>
  </div>
</template>

<script>
import dormApi from "@/api/xy/dorm";
import Pagination from "@/components/common/Pagination";
import pageMixin from "@/mixins/pageMixin";
import Detail from "./detail";
import { resetData } from "@/utils/index";
import _ from "lodash";
export default {
  name: "dorm",
  components: {
    Pagination,
    Detail
  },
  mixins: [pageMixin],
  data() {
    return {
      loading: false,
      dialog: false,
      search: {},
      dormList: []
    };
  },
  created() {
    this.getDormList();
  },
  methods: {
    doSearch() {
      resetData(this, "page");
      this.getDormList();
    },
    doReset() {
      resetData(this, "search");
      this.doSearch();
    },
    getDormList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search
      };
      // 过滤无效参数
      params = _.pickBy(params, item => item);
      dormApi.getDormList(params).then(({ data }) => {
        this.dormList = data.list;
        this.page.start = data.pageNumber;
        this.page.limit = data.pageSize;
        this.page.total = data.totalRow;
      });
    },
    goAdd() {
      this.$refs.detail.openDialog();
    },
    goEdit(id) {
      this.$refs.detail.openDialog(id);
    },
    goDel(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          dormApi
            .delDorm({
              id
            })
            .then(res => {
              if (res.code) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getDormList();
              } else {
                this.$message.error("删除失败!");
              }
            });
        })
        .catch(e => {
          console.log(e);
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang='scss' scoped>
.class-main {
  .card {
    margin: 30px;
    box-sizing: border-box;
  }
}
</style>
